<!--
 * @Author: boyyang
 * @Date: 2022-01-15 12:29:54
 * @LastEditTime: 2022-02-19 14:25:17
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\login\components\loginBoxWrapper.vue
-->

<template>
    <div :class="['login-box-wrapper', { 'login-move': isShowBox }]">
        <i class="iconfont icon-qiehuan1 del" @click="del"></i>
        <div :class="['login-box-input-wrapper', { 'login-box-input-wrapper-r': !loginType }]">
            <login-box :type="loginType" @signIn="signIn" @signUp="signUp"></login-box>
        </div>
        <div class="login-left" @click="btnClick(true)">
            <div class="left-wrapper" v-show="!loginType">
                <div class="time-wrapper">
                    <now-time background-color="rgba(107, 104, 130, 0.2)"></now-time>
                </div>
                <span></span>
                <div class="tip-text">
                    <span>已有账号前去登录？</span>
                    <i class="iconfont icon-qiehuangongsi"></i>
                </div>
            </div>
        </div>
        <div class="login-right" @click="btnClick(false)">
            <div class="right-wrapper" v-show="loginType">
                <div class="time-wrapper">
                    <now-time background-color="rgba(107, 104, 130, 0.2)"></now-time>
                </div>
                <span></span>
                <div class="tip-text">
                    <span>没有账号前去注册？</span>
                    <i class="iconfont icon-qiehuangongsi"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import loginBox from './loginBox.vue'
import { signInByEmail, singInByUserName, signUpByEmail } from '@/cloudbase/login'
import { useMessage } from '@/components/message'
import { useLoading } from '@/components/fullScreenLoading'
import { useRouter } from 'vue-router'
import { Ioption } from './types'

const message = useMessage()
const loading = useLoading()
const router = useRouter()

const loginType = ref<boolean>(true)
const isShowBox = ref<boolean>(false)

const btnClick = (type: boolean) => {
    if (isShowBox.value) {
        return
    }
    loginType.value = type
}


// 注册
const signIn = (option: Ioption): void => {
    loading.start()
    signUpByEmail(option.account, option.password)
        .then((res) => {
            loading.end()
            message.info('请前往邮箱点击确认，然后重新登录')
        })
        .catch((err) => {
            loading.end()
            message.error(err)
        })
}

// 登录
const signUp = (option: Ioption): void => {
    loading.start()
    singInByUserName(option.account, option.password)
        .then((res) => {
            if (res) {
                message.success('登录成功~')
                loading.end()
                toHome()
            }
        })
        .catch(() => {
            signInByEmail(option.account, option.password).then((res) => {
                if (res) {
                    message.success('登录成功~')
                    loading.end()
                    toHome()
                }
            }).catch(() => {
                message.error('登录失败!请检查账号或密码是否正确')
                loading.end()
            })
        })
}

// 首页
const toHome = (): void => {
    router.push({
        name: 'Home'
    })
}

const del = () => {
    isShowBox.value = !isShowBox.value
}

</script>

<style scoped lang="scss">
.login-box-wrapper {
    box-sizing: border-box;
    width: 700px;
    height: 400px;
    position: absolute;
    border-radius: 5px;
    box-shadow: 3px 5px 6px 4px rgb(0, 0, 0, 0.5);
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;

    background-image: url("@/assets/海琴烟\ 同人\ cosplay美女4K高清壁纸_彼岸图网.jpg");
    background-size: cover;
    background-position: center;

    transition: all 1s linear;

    animation: move 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    @keyframes move {
        0% {
            transform: translateX(-125%);
        }
    }

    .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        img {
            width: 100%;
        }
    }
    .login-box-input-wrapper {
        position: absolute;
        width: 50%;
        height: 108%;
        background-color: rgba(61, 59, 79, 0.7);
        border-radius: 5px;
        z-index: 9;

        left: 0;

        transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .login-box-input-wrapper-r {
        left: 50%;
    }

    .login-left {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;

        display: flex;
        justify-content: center;

        cursor: pointer;
    }

    .login-right {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;

        display: flex;
        justify-content: center;

        cursor: pointer;
    }

    .tip-text {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 800;
        color: whitesmoke;

        position: absolute;
        bottom: 20px;
        left: 0;

        i {
            font-size: 14px;
            color: whitesmoke;
            margin-left: 10px;

            animation: trans 1s linear infinite;

            @keyframes trans {
                0% {
                    transform: rotateZ(0deg);
                }
                100% {
                    transform: rotateZ(360deg);
                }
            }
        }
    }

    .time-wrapper {
        padding-top: 15px;
    }

    .del {
        position: absolute;
        right: 5px;
        bottom: 5px;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        z-index: 9;

        color: whitesmoke;

        &:hover {
            color: rgb(35, 165, 197);
            font-weight: 600;
        }
    }
}

.login-move {
    transform: translateX(-125%);

    animation: loginMove 1s cubic-bezier(0.075, 0.82, 0.165, 1);

    @keyframes loginMove {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(-125%);
        }
    }
}

@media screen and (max-width: 500px) {
    .login-box-wrapper {
        width: 100%;

        transition: all 1s linear;

        animation: move 1.5s linear;

        @keyframes move {
            0% {
                transform: translateX(-90%);
            }
        }

        .login-box-input-wrapper {
            width: 75%;
        }

        .time-wrapper {
            display: none;
        }

        .login-box-input-wrapper-r {
            left: 25%;
        }

        .tip-text {
            opacity: 0;
        }

        .del {
            font-size: 20px;
        }
    }

    .login-move {
        transform: translateX(-90%);

        animation: loginMove 1s cubic-bezier(0.075, 0.82, 0.165, 1);

        @keyframes loginMove {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(-90%);
            }
        }
    }
}
</style>